<template>
  <div ref="main" :style="{width: width,height:height}" :class="className"></div>
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/infographic')
import resize from './mixins/resize'

export default {
    name:'PieChart',
    mixins: [resize],    
    props:{
        className: { 
            type: String, 
            default: 'chart' 
        },
        width:{
            type: String, 
            default: '100%' 
        },
        height:{
            type: String, 
            default: '400px' 
        },
        seriesData: {
            type: Array, 
            default: () => [ {value: 335, name: '前端'}, {value: 310, name: 'Java'}, {value: 234, name: '移动端'}, {value: 135, name: '大数据'}, {value: 1548, name: '人工智能'}, {value: 1548, name: '区块链'} ] 
        }

    },
    data() {
        return {
            chart: null
        }
    },
    methods: {
        initChart(){
            this.chart = echarts.init(this.$refs.main,'infographic');
            this.chart.setOption(
                {
                    title: {
                        text: '各技术频道文章统计',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                        name: '统计内容',
                        type: 'pie',
                        radius: '50%',
                        data: this.seriesData,
                        emphasis: {
                            itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                        }
                    ]
                }
            )
            
        }
    },
    mounted() {
        // 在修改数据之后立即使用这个方法，获取更新后的 DOM
        this.$nextTick(()=>{
            this.initChart()
        });  
    },
    beforeDestroy() {
        if(!this.chart){
            return
        }
        // 删除绑定
        this.chart.dispose()
        this.chart=null
    },

}
</script>

<style>

</style>